<script setup lang="ts">
import MyChild from '@/components/MyChild.vue'
import { ref } from 'vue'

const money = ref(1000)
const car = ref('自行车')
const house = ref('奋斗者之家')
const updateMoney = (val: number) => {
    money.value = val
}
</script>

<template>
    <div>父组件money:{{ money }}</div>
    <div>父组件car:{{ car }}</div>
    <div>父组件house:{{ house }}</div>
    <!-- 化简前 -->
    <MyChild :money="money" @update:money="updateMoney" :car="car" @update:car="(val) => (car = val)" :house="house"
        @update:house="(val) => (house = val)" />
    <!-- 化简后 -->
    <!-- v-model:xxx 其实就是 :xxx="xxx" @update:xxx="(val) => (xxx = val)" 的语法糖 -->
    <MyChild v-model:money="money" v-model:car="car" v-model:house="house" />
</template>
